<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组下标越界测试</title>
</head>
<body>
  <span id="span0"></span>
  <br>
  在左侧下拉列表框中选择一个项，右侧下拉列表框中呈现的项将随之更改
  <br>
  <select id="province" title="一级行政区" onchange="setCities(this.value)"></select>
  <select id="cities" title="二级行政区"></select>
</body>
<script>
  // 数组arr的长度为3
  var arr = [ 0, "str", -1.5 ];
  // 虽然JavaScript中允许数组的元素超出数组长度，但不建议这样做
  arr[4] = "abc";
  // span元素标签内部显示结果为“abc”
  document.getElementById("span0").innerText = arr[4];
  // 使用Array对象的push方法在arr数组末尾追加一个新元素
  arr.push("item5");
  // span元素标签内部显示结果为“item5”
  alert(arr[5]);
  // 使用Array对象的pop方法移除arr数组末尾的元素“item5”
  arr.pop();
  // 使用Array对象的pop方法移除arr数组末尾的元素“abc”
  arr.pop();
  var province = [ "北京市", "广东省", "新疆维吾尔自治区" ];
  province["北京市"] = [ "东城区", "海淀区", "朝阳区", "丰台区" ];
  province["广东省"] = [ "广州市", "深圳市", "中山市", "珠海市" ];
  province["新疆维吾尔自治区"] = [ "乌鲁木齐市", "吐鲁番市", "哈密市" ];
  var i;
  for (i = 0; i < province.length; i++) {
    var p = new Option(province[i], province[i]);
    document.getElementById("province").options.add(p);
  }
  for (i = 0; i < province["北京市"].length; i++) {
    var c = new Option(province["北京市"][i]);
    // 在cities下拉列表框的options集合中添加新的option
    document.getElementById("cities").options.add(c);
  }
  function setCities(p) {
    var s = document.getElementById("cities");
    // 清空id为cities的select的所有options
    s.options.length = 0;
    // 添加数组province中键为p的所有值
    for (i = 0; i < province[p].length; i++) {
      s.appendChild(new Option(province[p][i]));
    }
  }
</script>
</html>